<!--
 * @Author: wy
 * @Date: 2021-01-20 15:22:24
 * @LastEditTime: 2021-01-21 10:09:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \radio-web\src\components\common\imgUpload.vue
-->
<template>
  <div>
    <div class="upload">
      <el-upload
        :disabled="disabled"
        :action="uploadUrl"
        :headers="header"
        :show-file-list="true"
        :file-list="fileList"
        :on-success="onSuccess"
        :on-remove="onRemove"
        :before-upload="beforePosterUpload"
        :multiple="multiple"
        class="avatar-uploader"
        list-type="picture-card">
        <i class="el-icon-plus avatar-uploader-icon"/>
      </el-upload>
    </div>
  </div>
</template>

<script>
import { apiUpload } from '../../api/upload'
import { getToken } from '../../utils/auth'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    fileList: {
      type: Array,
      default() {
        return []
      }
    },
    multiple: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      uploadUrl: apiUpload.upload_url,
      header: { 'Authorization': 'Bearer ' + getToken() }
    }
  },
  methods: {
    beforePosterUpload() {

    },
    /**
     * @name: 上传成功回调
     * @param {*} response
     * @param {*} file
     * @param {*} fileList
     * @return {*}
     */
    onSuccess(response, file, fileList) {
      console.log(fileList)
      this.$emit('onSuccess', fileList)
    },
    /**
     * @name: 图片移除回调
     * @param {*} file
     * @param {*} fileList
     * @return {*}
     */
    onRemove(file, fileList) {
      this.$emit('onRemove', fileList)
    }
  }
}
</script>

<style lang='scss' scoped>
  ::v-deep .upload{
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width:50px;
      height:50px;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100%;
      height: 100%;
      line-height: 50px;
      text-align: center;
      position: absolute;
      left:50%;
      top:50%;
      transform: translate(-50%,-50%);
    }
    .el-upload-list__item{
      width:50px;
      height:50px;
      img{
        width:100%;
        height:100%;
      }
    }
  }

</style>
